<template>
  <div id="Modify">
      <div class="top">
          <img src="../../static/img/Modify/top.png" width="100%" alt="">
          <img src="http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTINUplUqd1AQYbn8spd2FI4XDXPibE6FFsy7jEqbk4Z5M09YD0aFXGmQMMtOhQFRicu2R23Fl3AQ9dw/0" alt="" class="headImg">
          <p class="nickname" v-text="Nickname"></p>
          <div class="subject">
              <p>真实姓名</p>
              <input type="text" v-model="submitName">
              <hr />
              <p>身份证号码</p>
              <input type="text" v-model="submitID">
              <hr />              
          </div>
      </div>
      <div class="register" @click="submit()">
          修改信息
      </div>
      <!-- 修改动画 -->
      <div class="trialani" v-show="trialani">
        <img :src="trialImg" alt="" width="45%">
        <p v-text="trialtext"></p>
      </div>
      <!-- end -->       
  </div>
</template>

<script>
import store from "@/store/store";
import trialImg from "../../static/img/BusinessSub/33.png";
import trialImgT from "../../static/img/BusinessSub/complete.gif";
import trialImgF from "../../static/img/BusinessSub/completeF.gif";
export default {
  name: "Modify",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      Nickname: "",
      HeadImg: "",
      submitName: "",
      submitID: "",
      trialani: false,
      trialtext: "",
      trialImg: "../../static/img/BusinessSub/33.png",
      trialImgT: "../../static/img/BusinessSub/complete.gif",
      trialImgF: "../../static/img/BusinessSub/completeF.gif"
    };
  },
  methods: {
    // 获取微信关注者信息
    getWxpeople: function() {
      this.$http
        .get(
          "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?RegisterType=3&action_type=WechatPushPerson&action_data=" +
            store.state.openid
        )
        .then(response => {
          // success callback
          this.Nickname = response.data.RTWECHATPUSHObject[0].NICK_NAME;
          this.HeadImg = response.data.RTWECHATPUSHObject[0].HEADIMAGEURL;
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 获取会员信息
    getVip: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetMembershipInfo&action_record=" +
            store.state.openid +
            "&action_data=" +
            store.state.wxid +
            "&RegisterType=1"
        )
        .then(response => {
          // success callback
          this.submitName = response.data.MEMBERSHIP[0].MEMBERSHIP_NAME;
          this.submitID = response.data.MEMBERSHIP[0].CERTIFICATE_NUMBER;
          if (this.submitName == "&nbsp;") {
            this.submitName = "";
          }
          if (this.submitID == "&nbsp;") {
            this.submitID = "";
          }          
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 提交修改
    submit: function() {
      this.$http
        .get(
          this.Url +
            "action_type=UpdateMembershipInfo&action_record=" +
            store.state.openid +
            "&action_data=" +
            store.state.wxid +
            "&MEMBERSHIP_NAME=" +
            this.submitName +
            "&CERTIFICATE_NUMBER=" +
            this.submitID +
            "&BUSINESS_NAME=驿商科技"
        )
        .then(response => {
          // success callback
          if (response.data == 1) {
            this.trialani = true;
            this.trialImg = trialImgT;
            this.trialtext = "修改成功";
            setTimeout(() => {
              this.trialani = false;
              this.trialImg = trialImg;
              this.$router.push({ path: "/Homepage" }); //进入主界面
            }, 2000);
          } else {
            this.trialani = true;
            this.trialImg = trialImgF;
            this.trialtext = response.data;
            setTimeout(() => {
              this.trialani = false;
              this.trialImg = trialImg;
            }, 2000);
          }
        })
        .catch(error => {
          // console.log(error);
        });
    }
  },
  created() {
    this.getWxpeople();
    this.getVip();
  }
};
</script>

<style>
input {
  padding-left: 0.5rem;
  width: 100%;
}
.top {
  position: relative;
  text-align: center;
  background-color: #fff;
}
.headImg {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 3.6rem;
  margin-top: -2.2rem;
}
.nickname {
  font-size: 16px;
  height: 1.5rem;
  line-height: 1.5rem;
}
.subject {
  width: 100%;
  box-shadow: 0px -2px 8px 0.5px #e2e2e2;
  margin-top: 0.3rem;
  padding: 1rem;
  font-size: 16px;
  text-align: left;
}
.subject hr {
  margin-bottom: 2rem;
}
.register {
  width: 90%;
  height: 2rem;
  line-height: 2rem;
  border-radius: 2px;
  background-color: #4c4b59;
  margin: 1rem auto;
  text-align: center;
  color: #fff;
}
.trialani {
  width: 10rem;
  height: 6rem;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  text-align: center;
  background-color: #fff;
  position: fixed;
  top: 42%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
</style>
